<template>
  <div class="main-container container-fluid container-limited page-holder">
    <groups-breadcrumb />
    <div class="page-title-holder no-border-bottom">
      <h2 class="page-title">群组成员</h2>
    </div>
    <p>用户可以通过管理员提供的邀请码或邀请链接加入群组。</p>
    <invites v-if="isWebAdmin || isGroupOwner || isGroupAdmin" />
    <div class="card m-t-16">
      <div class="card-header">
        <span class="title">{{ curGroup.title }}</span>
        &nbsp;的成员
        <el-tag type="info" size="mini" class="m-l-10">{{ curGroup.membersCount }}</el-tag>
        <el-checkbox
          v-if="isWebAdmin || isGroupOwner"
          size="mini"
          v-model="editing"
          border
          class="m-l-16 bg-fff"
        >管理成员</el-checkbox>
      </div>
      <members-list :editing="editing" class="card-content" />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex';
import GroupsBreadcrumb from '@/views/groups/components/breadcrumb';
import Invites from './components/invitation';
import MembersList from './components/member-list';

export default {
  name: 'GroupsMembers', // 群组成员
  components: { GroupsBreadcrumb, Invites, MembersList },
  data() {
    return {
      editing: false,
    };
  },
  computed: {
    ...mapState({ curGroup: 'currentGroup' }),
    ...mapGetters(['isWebAdmin', 'isGroupOwner', 'isGroupAdmin']),
  },
};
</script>

<style></style>
